<template>
  <el-cascader
				 :options="options"
				 :props="customProps"
				 v-model="selectedValue"
				 collapse-tags
				 style="width:220px"
			   collapse-tags-tooltip
			   max-collapse-tags="3"
				 :show-all-levels="false"
				 filterable
				 @change="changeValue"
			   clearable></el-cascader>
</template>

<script setup lang="ts">
import lodash from "lodash-es";

const props = defineProps({
  options: {
    required: true,
    type: Array,
    default: [],
  },
	modelValue: {
		type: String,
		default: "",
	},
	multiple: {
		type: Boolean,
		default: false
	},
	checkStrictly: {
		type: Boolean,
		default: false
	}
});

const multipleProps = { multiple: true }
const customProps = ref<any>({})

const emits = defineEmits(["update:modelValue", 'change']);

const selectedValue = useVModel(props, "modelValue", emits);

function changeValue(val?: string) {
	emits('change', val)
}

onMounted(() => {
	if (props.multiple) {
			lodash.set(customProps.value, 'multiple', true)
	}
	if (props.checkStrictly) {
			lodash.set(customProps.value, 'checkStrictly', true)
	}
});
</script>

